/*
 * @Author: 刘岩 15136056318@163.com
 * @Date: 2023-08-14 14:04:07
 * @LastEditors: 刘岩 15136056318@163.com
 * @LastEditTime: 2023-09-07 23:46:27
 * @FilePath: /template3-vite-pc-h5_ts/vite.config.ts
 * @Description:
 */
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import config from './src/config/index.ts'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import postCssPxToViewport from 'postcss-px-to-viewport'
const { HTTP, APP } = config

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  //在配置中使用环境变量, 因为vite默认是不加载 .env 文件的
  const env = loadEnv(mode, process.cwd(), '')
  return {
    base: './',
    define: {
      env,
    },
    server: {
      open: false, //自动在浏览器中打开应用程序
      port: 8888,
      host: '0.0.0.0',
      https: false,
      proxy: {
        ...(HTTP.cross_prefix.map(p => {
          let item = {
            [p]: {
              target: env.VITE_APP_BASE_URL,
              changeOrigin: true,
            },
          }
          return item
        }) as any),
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/assets/styles/px-to-viewport.scss";`,
        },
      },
      postcss: {
        plugins: [
          APP.isH5
            ? postCssPxToViewport({
                unitToConvert: 'px', // 要转化的单位
                viewportWidth: 375, // UI设计稿的宽度
                unitPrecision: 6, // 转换后的精度，即小数点位数
                propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
                viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
                fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
                selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
                minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
                mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
                replace: true, // 是否转换后直接更换属性值
                // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
                exclude: [],
                landscape: false, // 是否处理横屏情况
              })
            : () => {},
        ],
      },
    },
    resolve: {
      //别名
      alias: {
        '@': path.resolve(__dirname, './src/'),
        '@img': path.resolve(__dirname, './src/assets/img/'),
        '@icon': path.resolve(__dirname, './src/assets/icon/'),
      },
      // 忽略后缀名的配置选项, 添加 .vue 选项时要记得原本默认忽略的选项也要手动写入
      extensions: ['.js', '.json', '.vue'],
    },
    plugins: [
      vue(),
      AutoImport({
        resolvers: [APP.isH5 ? () => {} : ElementPlusResolver()],
      }),
      Components({
        resolvers: [
          APP.isH5
            ? function (componentName) {
                if (componentName.startsWith('Van')) {
                  return { name: componentName.slice(3), from: 'vant' }
                }
              }
            : ElementPlusResolver(),
        ],
      }),
    ],
    // build: {
    //   // 清除console等多余代码
    //   terserOptions: {
    //     compress: {
    //       drop_console: true,
    //       drop_debugger: true,
    //     },
    //   },
    // },
  }
})
